<template>
  <div class="app-container">
    <div class="flex">
      <div class="right width400 ml10">
        <el-card class="box-card history-box mb20 history-baqsj">
          <div slot="header" class="clearfix flex flex-row align-center height32">
            <div class="line" />
            <span class="font16 ml10 flex-auto">批示</span>
          </div>
          <vue-scroll :ops="ops">
            <div v-for="item in baqsjRecordMarkList" :key="item.id" class="timeline">
              <el-form label-width="100px">
                <el-form-item style="margin-bottom: 0;" label="批示人：">{{ item.createBy }}</el-form-item>
                <el-form-item style="margin-bottom: 0;" label="批示内容：">{{ item.relatedContent }}</el-form-item>
              </el-form>
            </div>
          </vue-scroll>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'BaqsjHandle',
  components: {
  },
  props: {
    baqsjRecordMarkList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      timelineShow: true,
      ops: {
        vuescroll: {
          mode: 'native',
          sizeStrategy: 'percent',
          detectResize: true,
          locking: true
        },
        scrollPanel: {
          maxHeight: 800
        },
        bar: {
          background: '#277fd6',
          size: '3px',
          keepShow: true
        },
        rail: {
          background: '#E0E8F0',
          opacity: 1,
          size: '3px',
          specifyBorderRadius: false,
          gutterOfEnds: '50px',
          gutterOfSide: '0px',
          keepShow: false
        }
      }
    }
  },
  computed: {
    ...mapGetters(['name', 'userId'])
  },
  async created() {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.process-header {
    height: 50px;

    .title {
        font-size: 25px;
        font-weight: 600;
    }

    .sub-title {
        font-size: 19px;
        vertical-align: bottom;
        padding-left: 10px;
        color: #555;
    }
}

.history-box {
    border-radius: 15px;
    background: #fff;

    .line {
        height: 22px;
        width: 5px;
        background: #277fd6;
    }
}

.empty-time {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    img {
        width: 200px;
    }
}

.timeline {
    &:not(:last-child) {
        border-bottom: 1px solid #ccc;
    }
}

::v-deep .el-input__inner {
    color: #277fd6 !important;
}

::v-deep .el-textarea__inner {
    color: #277fd6 !important;
}
</style>
